What is Component ?
我們先看一下字面上的翻譯
n.（機器、設備等的）構成要素；零件；成分[C]
adj. 組成的；構成的

由此可見 Component 就是構成某一個較大物件的基礎單位

一個網頁我們可以把它拆分成是許多的 Component 所構成的，Haeder aside main footer，然後每個大的 Component 裡面我們還可以依據不同的功能，在拆分成更小的 Component ，這樣的組織架構就會像是下圖那樣的組件樹

所以可以說組件(Component) 就是構成整個 Vue 應用中最重要的單位，沒有了組件 Vue 應用也就不復存在了
(React、Angular 也是用類似的概念在構建整個 App 的喔)

Why Component

我們先來說說一個設計良好的 Component 需要具備那些條件

• 職責明確
  每一個 Component 最好只負責單一個很明確的目標，例如列表顯示就單純做顯示的任務，如果該列表有搜尋功能，就 應該把搜尋獨立出去另外新建一個搜尋 Component，職責明確的 Component 代表著功能單一，這可確保我們不會寫出過於龐大難以維護的巨大 Component 怪物。
• 高內聚
  以前我們可能會有類似這樣的檔案結構來把同一個頁面需要的要素聚合再一起foo.html\foo.css\foo.js，
  現代的網頁基本上 Html\CSS\JS 缺一不可，同樣的他們三個也是一個 Component 應該要具備的三要素，Vue 有一種 Component 叫做單文件組件，就把這三個部份聚合在同一個檔案中，這樣我們要修改這個 Component 就可以很輕易的找到屬於他的所有程式片段
• 低耦合
  職責明確和高內聚的 Component 基本上已經達成低耦合的要件，剩下的部分就是我們常常聽到視圖不要和業務邏輯寫再一起，這是什麼意思呢？舉例來說我有一個設計精美的 Input Component，現實狀況是我在不同的地方都import 了這個 Component，但是這些地方輸入都有不同的業務處理邏輯，試想如果把業務邏輯跟視圖寫在一起了，是不是有幾種業務邏輯我就要產生幾個看起來有87%像卻只有業務邏輯不同的 Component 呢

以上這些實踐，為了就是讓 Component 以及整個 Web App 達成 易於修改 易於維護 易於重用 易於測試
這樣已經不言而喻為什麼我們要使用 Component 了吧！

下一篇就會開始說明 Vue Component 是如何宣告與使用的

Refs:
组件基础
单文件组件